<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_offset系列</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 300px;
                height: 200px;
                padding: 10px;
                border: 1px solid black;
                margin-left: 20px;
                background-color: cornsilk;
            }
        </style>
    </head>
    <body>
        <div></div>


        <script>
            // 只读
            // - offsetWidth  
            //     - 拿的是盒子 内容 + padding + border的宽
            // - offsetHeight 
            //     - 拿的是盒子   内容 + padding + border的高
            // - offsetLeft      
            //     - 拿的是元素的偏移量：可以认为就是拿的绝对定位left值
            //     - 切记如果进行offsetLeft的值进行加法运算不允许添加px
            // - offsetTop       
            //     - 拿的是元素的偏移量：可以认为就是拿的绝对定位top值

            var div = document.querySelector('div');

            console.log(div.offsetWidth);

            console.log(div.offsetHeight);

            console.log(div.offsetLeft);

            console.log(div.offsetTop);


            div.offsetWidth = '500px';
            div.offsetHeight = '500px';
            div.offsetLeft = '100px';
            div.offsetTop = '100px';

        </script>
    </body>
</html>